<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增活动量计划</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no"/><!-- 禁用手机号码识别 -->
    <meta name="format-detection" content="email=no" /> <!-- 禁用邮箱识别 -->
    <link rel="stylesheet" href="./css/common.css">
    <script src="./libs/zepto.js"></script>
    <script src="./libs/touch.js"></script>
    <script src="./libs/selector.js"></script>
    <script src="./libs/event.js"></script>
    <script src="./libs/ajax.js"></script>
    <script src="./laydate/laydate.js"></script>


</head>
<body>

<!--整体布局盒子-->
<div class="container">
    <header>
        <a href="javascript:;0"><img src="./images/lefticon.png" alt=""></a>
        <span>新增活动量计划</span>
    </header>
    <!--tab change B-->
    <div class="activity_plan">
        <div class="manageUsers now">管户活动量计划</div>
        <div class="notManageUsers">非管户活动量计划</div>
    </div>
    <!--tab change E-->
    <!--userinfo B-->
    <!--管户-->
    <section id="manageUsers" class="userinfo">
        <ul class="list-unstyled">
            <li id="search_name">
                <!--<span>客户姓名</span>-->
                <span id="search_namebox"><input readonly="readonly" class="text-right inputHtml resstInput custName" type="text" placeholder="请输入客户姓名">
                </span>
            </li>
            <li>
                <span>访问方式</span>
                <span class="faceIcon"><input readonly="readonly" class="text-right" type="text" value="面访"></span>
            </li>
            <li>
                <span class="starIcon">联系方式</span>
                <span><input  class="text-right inputHtml resstInput contTel" type="text" placeholder="请输入联系方式"></span>
            </li>
            <li>
                <span class="starIcon">预处理日期</span>
                <span><input readonly="readonly" id="laydate1" class="text-right resstInput pretreatDt" type="text" placeholder="请选择预处理日期"><a class="searchBtn" href="javascript:;0"><img src="./images/righticon.png" alt=""></a></span>
            </li>
            <li>
                <span>其它关键信息</span>
            </li>
            <li>
                 <span>
                     <textarea name="" class="textarea commentsLong" cols="30" rows="10" placeholder="写下你对客户的基本描述；"></textarea>
                 </span>
            </li>
        </ul>
    </section>
    <!--非管户-->
    <section id="notManageUsers" class="userinfo">
        <ul class="list-unstyled">
            <li>
                <span class="starIcon">客户姓名</span>
                <span><input class="text-right inputHtml resstInput custName" type="text" placeholder="请输入客户姓名"></span>
            </li>
            <li>
                <span>访问方式</span>
                <span class="faceIcon"><input readonly="readonly" class="text-right" type="text" value="面访"></span>
            </li>
            <li>
                <span class="starIcon">联系方式</span>
                <span><input class="text-right inputHtml resstInput contTel" type="text" placeholder="请输入联系方式"></span>
            </li>
            <li>
                <span class="starIcon">预处理日期</span>
                <span><input readonly="readonly" id="laydate2" class="text-right resstInput pretreatDt" type="text" placeholder="请选择预处理日期"><a class="searchBtn" href="javascript:;0"><img src="./images/righticon.png" alt=""></a></span>
            </li>
            <li>
                <span>其它关键信息</span>
            </li>
            <li>
                 <span>
                     <textarea name="" class="textarea commentsLong" cols="30" rows="10" placeholder="写下你对客户的基本描述；"></textarea>
                 </span>
            </li>
        </ul>
    </section>
    <!--userinfo E-->
    <!--底部按钮  B-->
    <footer>
            <div class="btnBox">
                <div id="reset">重置</div>
                <div id="cancer">取消</div>
                <div id="save">确定</div>
            </div>
    </footer>
    <!--底部按钮  E-->
</div>
<!--弹出层-->
<div class="layer">
    <div class="layerSearch">
        <input class="inputHtml" type="text" placeholder="输入客户姓名查询">
        <a id="layerBtn" href="javascript:;0"><img src="./images/search1.png" alt=""></a>
    </div>
    <div class="allName">
        <ul>
            <li><span>客户号</span><span>客户姓名</span></li>
            <li><span>123</span><span>啊</span></li>
            <li><span>456</span><span>哦</span></li>
            <li><span>789</span><span>额</span></li>
            <li><span>000</span><span>易</span></li>
        </ul>
    </div>

</div>

</body>
<script>
    $(function () {
        //    设置缓存数据
        function set() {
            localStorage.setItem('custName', $(".custName").val());            //客户姓名
            localStorage.setItem('contTel', $(".contTel").val());            //联系方式
            localStorage.setItem('pretreatDt',$(".pretreatDt").val());            //预处理日期
            localStorage.setItem('commentsLong',$(".commentsLong").val());            //其他关键信息
                                                                                         //客户号需要在ajax那边设置
        }


        //日期字符串转换为日期
        laydate({
            elem: '#laydate1',
            event:"focus"
        });
        laydate({
            elem: '#laydate2',
            event:"focus"
        });

        //点击切换管户和非管户界面
        $('.notManageUsers').on("tap",function () {
            $(this).toggleClass("now").siblings().removeClass("now");
            $("#notManageUsers").css("display","block");
            $("#manageUsers").css("display","none")
        })
        $('.manageUsers').on("tap",function () {
            $(this).toggleClass("now").siblings().removeClass("now");
            $("#manageUsers").css("display","block");
            $("#notManageUsers").css("display","none")
        })

        //点击文本域框内容为空
        $(".textarea").on("focus",function () {
            $(this).attr("placeholder","");
        }).on("blur",function () {
            $(this).attr("placeholder","写下你对客户的基本描述；");
        });
        //点击input内容为空
        var placeholder;
        $(".inputHtml").on("focus",function () {
            placeholder=$(this).attr("placeholder");
            $(this).attr("placeholder","")
        }).on("blur",function () {
            $(this).attr("placeholder",placeholder);
        });

        //重置按钮
        $(".btnBox>#reset").on("tap",function () {
//            重置文本域
            var textVal=$("section .textarea").attr("placeholder");
            $("section .textarea").val("").attr("placeholder",textVal)
//            重置input内容
            $("section .resstInput:eq(0)").val("").attr("placeholder","请输入客户姓名");
            $("section .resstInput:eq(1)").val("").attr("placeholder","请输入联系方式");
            $("section .resstInput:eq(2)").val("").attr("placeholder","请选择预处理日期");
            $("section .resstInput:eq(3)").val("").attr("placeholder","请输入客户姓名");
            $("section .resstInput:eq(4)").val("").attr("placeholder","请输入联系方式");
            $("section .resstInput:eq(5)").val("").attr("placeholder","请选择预处理日期");
        });

//        弹出层功能
        $("#search_namebox").on("tap",function () {
            //点击弹出层
            $(".layer").css("display","block");
        });
//        让搜索框的val等于对应li里面的客户姓名
        $(".allName").on("tap", ".allName>ul>li", function (e) {
            var custName = $(this).find("span:eq(1)").html();
             $("#search_namebox>input").val(custName);
            var custNo = $(this).find("span:eq(0)").html();
            //设置客户号的本地存储
            localStorage.setItem('custNo',custNo);


            var allNameWidth = $(".allName").width();
            var allNameHeight = $(".allName").height();
            if (e.pageX < allNameWidth || e.pageY < allNameHeight) {
                $(".layer").css("display", "none");
            }
        });
//        // 点击弹出层空白处返回主界面
        $(".allName").on("click",function (e) {
            var allNameWidth = $(".allName").width();
            var allNameHeight = $(".allName").height();

            if (e.pageX < allNameWidth || e.pageY < allNameHeight) {
                $(".layer").css("display", "none");
            }
        })


        //点击弹出层的搜索标签调取后台数据
        //如果客户姓名不存在，提示 不存在
        // 需要把客户号设置localstoryg
        $("#layerBtn").on("tap",function () {
            var userId=$(".layerSearch input").val();
            console.log(userId);
            $.ajax({
             type: 'POST',
             url: 'http://10.50.122.60:8080/webGate/app/actPlanCustInfoList',
             data: {
                 domainAccount:"LIULAN239",
                 userId:"LIULAN239",
                 pagesize:"5",
                 current:"5"
             },
             dataType: 'json',
             success: function(data){
             if(data.status==1){
             console.log(data);
             }
             }
             })
        });


        //点击取消跳转到makePlan界面
        $("#cancer").on("tap",function () {
            window.location.href="./makePlan.html";
        });

        //点击确定跳转到makePlan界面，将用户填写的value带入
        $("#save").on("tap",function () {
            window.location.href="./makePlan.html";
            //设置存储
            set();
        });




    });

</script>
</html>